<script setup lang="ts">
import { defineProps } from "vue";
const props = defineProps(["selected"]);

const filters = [
  { label: "全部", value: "all" },
  { label: "已完成", value: "done" },
  { label: "未完成", value: "todo" },
];
</script>

<template>
  <div>
    <!-- 过滤器(tab切换) -->
    <div class="filters">
      <span
        v-for="filter in filters"
        :key="filter.value"
        class="filter"
        :class="{ active: selected === filter.value }"
        @click="$emit('change-filter', filter.value)"
        >{{ filter.label }}</span
      >
    </div>
  </div>
</template>

<style scoped></style>
